<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
        <title></title>
        <link rel="stylesheet" type="text/css" href="{:__CSS__}jquery.datetimepicker_1.css"/>
        <script type="text/javascript" src="{:__JS__}jquery-1.11.3.js"></script>
        <script type="text/javascript" src="{:__JS__}/rem.js"></script>
        <script src="{:__JS__}/jquery.validate.js"></script>
        <script src="{:__JS__}/jquery.datetimepicker.full.js"></script>
        <script type="text/javascript" src="{:__JS__}layer/layer.js"></script>
    </head>
    <style type="text/css">
        p{
            margin: 0;
            padding: 0;
        }
        html,body{
            font-size: 0.14rem;
        }
        .yz-icon {  
            display: inline-block;  
            color: orangered;
        }  
        .tanchu{
            box-sizing: border-box;
            padding: 0.2rem 0.1rem;
        }
        input{
            width: 97%;
            height: 0.3rem;
            border-radius: 5px;
            outline: none;
            border:none;
            border: 1px solid #999;
            padding-left: 5px;
        }
        .tijiao{
            display: block;
            width: 100%;
            line-height: 0.4rem;
            text-align: center;
            background: #3DBB29;
            border-radius: 6px;
            color: #fff;
            margin-bottom: 25px;
        }
        .yanzheng{
            position: absolute;
            right: 9px;
            top: 8px;
        }
        .shuru{
            position: absolute;
            right: 9px;
            top: 8px;
            display: none;
        }
        .relative{
            position: relative;
        }
        .font{
            display: block;
            margin-bottom: 6px;
            line-height: 20px;
        }
        #registerUserForm div{
        	position: relative;
        }
        #registerUserForm label{
        	position: absolute;
        	left: 0.1rem;
        	bottom: -14px;
        }
        .sex{
        	width: 20px;
        	line-height: 40px;
        	position: absolute;
        	top: 5px;
        }
        .xingbie{
        	float: right;
        	line-height: 40px;
        	position: relative;
        	width: 36%;
        }
        #xiguan{
        	width: 100%;
		    height: 0.356rem;
		    border-radius: 5px;
		    outline: none;
        }
		.scroll-wrapper {      
			-webkit-overflow-scrolling: touch;  
    		overflow-y: scroll; 
    	}
    </style>
    <body>
        <!--页面弹出框-->
        <div class="tanchu">
            <p class="font">请填写提交信息：</p>
            <form id="registerUserForm">  
            	<div style="height: 40px;margin-bottom: 10px">
            		<span style="display: inline-block;line-height: 40px;">性别</span>
            		<p class="xingbie">
            			<span style="display: inline-block;line-height: 40px;margin-right: 20px;">男：</span><input  type="radio" id="gender_male" value="0" name="gender" class="sex" style="left: 18px;"/>
                                                            
	                	<span style="display: inline-block;line-height: 40px;">女：</span><input  type="radio" id="gender_female" value="1" name="gender" class="sex" style="left: 66px;"/>
            		</p>
                </div>  
                <div>
                    <input type="text" id="userId" name="userId" placeholder="请填写姓名"/>
                </div>  
                <br/>
                <div>
                    <input type="text" id="age" name="age" placeholder="请填写年龄"/>
                </div>  
                <br/>
                <div>
                    <select id="xiguan" name="xiguan" title="请选择一项" placeholder="请选择饮食习惯">
	                    <option value="1">素食较多</option>
	                    <option value="2">肉食较多</option>
	                </select>
                </div>  
                <br/>
				<div>
                    <input type="text" id="qianxue1" name="qianxue1" placeholder="请填写潜血便潜血数值" />
                </div>
                <br/>
				<div>
                    <input type="text" id="qianxue2" name="qianxue2" placeholder="请填写做便潜血检测体检单位" />
                </div>
                <br/>
                <div>
                    <input type="text" id="datetimepicker" name="datetimepicker" placeholder="请选择预约时间" onfocus="this.blur();"/>
                </div>
                <br/>
                <div>
                    <input type="text" id="mobile" class="mobile" name="mobile" placeholder="请填写联系方式"/>
                </div>
                <br/>
                <div class="relative">
                    <input type="text" id="yanzheng" name="yanzheng" placeholder="请填写验证码"/>
                    <span class="yanzheng">点击获取验证码</span>
                    <p class="shuru"><span>60</span>后重新获取验证码</p>
                </div>
                <br/>
                <div>
                    <input type="text" id="adrees" name="adrees" placeholder="请填写您的地址"/>
                </div>
                <br/>
                <span class="tijiao">提交</span> 
            </form>  
        </div>
    </body>
	
    <script type="text/javascript">
        $('#datetimepicker').datetimepicker({
            timepicker: false, //关闭时间选项
            step: 10,
            format: "Y-m-d", //选择日期后，文本框显示的日期格式 
        });
		
		setInterval(function () {
	        $("label").hide();
	    }, 6000);

        // 验证手机号码格式  
        jQuery.validator.addMethod("checkusermobile", function (value) {
            var _len = $("#mobile").val().length;
            if (_len != 11) {
                return false;
            }
            return true;
        });

        $("#registerUserForm").validate(
                {
                    rules: {
                        userId: {
                            required: true,
                            /*checkuser : true,  
                             checkuserisnumber:true,  
                             checkuserfrist:true,  
                             checkuserisfristga:true,  
                             minlength : 5,  
                             maxlength : 15,  */
                        },
                        gender: {
                            required: true,
                        },
                        age: {
                            required: true,
                        },
                        mobile: {
                            required: true,
                            number: true,
                            checkusermobile: true
                        },
                        datetimepicker: {
                            required: true,
                        },
                        yanzheng: {
                            required: true,
                        }

                    },
                    messages: {
                        userId: {
                            required: "  <span class='yz-icon'>用户名不能为空</span>",
                            /*checkuserisnumber : "  <span class='yz-icon'>用户名不能全是数字</span>",  
                             checkuserfrist:"  <span class='yz-icon'>首位必须是字母</span>",  
                             checkuserisfristga:"  <span class='yz-icon'>首位必须是字母</span>",  
                             minlength : "  <span class='yz-icon'>用户名长度最少为5个字符</span>",  
                             maxlength : "  <span class='yz-icon'>用户名长度最大为15个字符</span>",  
                             checkuser : "  <span class='yz-icon'>用户名格式不正确</span>"   */
                        },
                        gender: {
                            required: "  <span class='yz-icon'>性别不能为空</span>",
                        },
                        age: {
                            required: "  <span class='yz-icon'>年龄不能为空</span>",
                        },
                        mobile: {
                            required: "  <span class='yz-icon'>手机号码不能为空</span>",
                            number: "  <span class='yz-icon'>手机号码只能为数字</span>",
                            checkusermobile: "  <span class='yz-icon'>手机号码格式不正确</span>"
                        },
                        datetimepicker: {
                            required: "  <span class='yz-icon'>预约时间不能为空</span>",
                        },
                        yanzheng: {
                            required: "  <span class='yz-icon'>验证码不能为空</span>",
                        }

                    }
                });
        $(".tijiao").on("click", function () {
        	var val=$('input:radio[name="gender"]:checked').val();
            var did = sessionStorage.getItem("did");
            $("#registerUserForm").valid();
            var data = $("#registerUserForm").serialize();
            console.log(val);
            $.ajax({
                url: "__APP__/Home/Index/order",
                type: "post",
                data: data+'&did='+did+"&area="+sessionStorage.getItem("area")+"&sex="+val,
                datatype: "json",
                success: function (re) {
                    if (re.val == 1) {
                        alert(re.str);
                        window.setInterval(function() { 
				            top.location.reload();
				        },1000); 
                    } else {
                        layer.msg(re.str);
                    }
                }
            })
        })
        var a;
        $(".yanzheng").on("click", function () {
            if ($(".mobile").val() != "") {
                $(this).css("display", "none");
                $(".shuru").css("display", "block");
                a = setInterval("myInterval()", 1000);
                $.ajax({
                    url: "__APP__/Home/public/reg_code",
                    type: "post",
                    data: "mobile=" + $(".mobile").val()+"&area="+sessionStorage.getItem("area"),
                    datatype: "json",
                    success: function (re) {
                        if (re.val == 'RS') {
                           	layer.msg(re.str);
                        } else {
                            layer.msg(re.str);
                        }
                    }
                })
            } else {
                layer.msg('请输入手机号');
            }
        })
        function myInterval() {
            if ($(".shuru").find("span").html() == 0) {
                window.clearInterval(a);
                $(".shuru").find("span").html('60');
                $(".yanzheng").css("display", "block");
                $(".shuru").css("display", "none");
            } else {
                $(".shuru").find("span").html($(".shuru").find("span").html() - 1);
            }
        }
        //alert(sessionStorage.getItem("did"));

    </script>
</html>
